今天我打算以 Messenger 的畫面來做一個簡單的 DEMO
首先是先針對各個頁面功能進行描述而後再其畫面細節進行規劃
那讓我們開始吧！

在 Messenger 中主要分成三個大區塊
分別是

1. 聊天室
2. 用戶
3. 個人設定

在這部分我們會先將大致上的畫面 Layout 去固定下來
細節功能再陸續補上

聊天室

1. 搜尋訊息
2. 查看當前在線好友
3. 查看先前的聊天訊息

用戶

1. 查看限時動態
2. 查看線上用戶
3. 有一個按鈕可供查詢聯絡人

個人設定

1. 頭像及名稱
2. 許多設定的按鈕

基本上目前看起來整體畫面是長成這樣
那接下來我們便進行我們開發環境的建置吧

透過 VS Code 打開專案並關閉 Debug 模式的顯示

flutter create <project_name>
cd <project_name>
code .

首先我們先完成第一個頁面也就是聊天室
這部分目前我們所使用的 Widget 有

1. PreferredSize
   用來控制 AppBar 的高度
2. CupertinoSearchTextField
   具備 iOS 風格的搜尋框
3. CircleAvatar
   用來呈現人物大頭照的 Widgets
   配合 background Image 可以呈現出各式各樣的頭像
4. Image.network
   用來渲染網路上可存取的圖片資源
   底層是透過 NetworkImage 所實作
5. NetworkImage
   同樣是可以用來渲染網路上可存取的圖片資源
6. BottomNavigationBar
   呈現出底下可供換頁瀏覽的按鈕功能
7. BottomNavigationBarItem
   實際上出現在 NavigationBar 中的 Widget

完整程式碼

Github

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class ChatRoomScreen extends StatefulWidget {
  const ChatRoomScreen({super.key});

  @override
  State<ChatRoomScreen> createState() => _ChatRoomScreenState();
}

class _ChatRoomScreenState extends State<ChatRoomScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(40),
        child: AppBar(
          leading: const Icon(Icons.menu),
          title: const Text("聊天室"),
          actions: const [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 10.0),
              child: Icon(Icons.note_add_outlined),
            )
          ],
        ),
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
        children: [
          const CupertinoSearchTextField(),
          const SizedBox(height: 10),
          Row(
            children: [
              CircleAvatar(
                backgroundColor: Colors.grey[200],
                child: const Icon(Icons.video_call),
              )
            ],
          ),
          const SizedBox(height: 10),
          ListTile(
            leading: CircleAvatar(
              child: Image.network(
                  "https://pbs.twimg.com/profile_images/1187814172307800064/MhnwJbxw_400x400.jpg"),
            ),
            title: Text("FirstName"),
            subtitle: Text("Last Message"),
            trailing: Icon(Icons.check_circle),
          ),
          ListTile(
            leading: CircleAvatar(
                child: Image.network(
                    "https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg")),
            title: const Text("SecondName"),
            subtitle: const Text("Last Message"),
            trailing: const Icon(Icons.check_circle),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(items: const [
        BottomNavigationBarItem(icon: Icon(Icons.message), label: "聊天室"),
        BottomNavigationBarItem(icon: Icon(Icons.people), label: "用戶"),
        BottomNavigationBarItem(
            icon: CircleAvatar(
              radius: 15,
              backgroundImage: NetworkImage(
                  "https://pbs.twimg.com/profile_images/1187814172307800064/MhnwJbxw_400x400.jpg"),
            ),
            label: "設定"),
      ]),
    );
  }
}